<template>
   <div class="product">
       <!--模块一：banner -->
       <div class="banner">
           <!-- <img :src="productBanner" alt="" class="productBanner"> -->
       </div>
       <!--模块二：产品优势 -->
       <div class="advantage w1190">
           <h2 class="commonTitle">产品优势</h2>
          <ul class="advanUl clearfix">
              <li class="advanLi pull-left" v-for="(item,index) in advanSorts" :key="index">
                  <div class="advanImgOuter">
                    <div class="shade"></div>
                    <img :src="item.img" alt="" class="advanImg">
                  </div>
                  <h3 class="advanTitle">{{item.advanTitle}}</h3>
                  <p class="advanText">{{item.advanText}}</p>
              </li>
          </ul>
       </div>
       <!--模块二：产品流程介绍 -->
       <div class="flow w1190">
          <h2 class="commonTitle">产品流程介绍</h2>
          <div class="specific">
              <img :src="productFlow">
          </div>
       </div>
   </div>
</template>
<script>
export default {
  data() {
    return {
      //banner图片
      productBanner: "img/product/productBanner.png",
      advanSorts: [
        {
          advanTitle: "合同签署",
          advanText: "你可以从任何设备上使用它。安全加密以PDF的方式进行签署。",
          img: "img/product/advan1.png"
        },
        {
          advanTitle: "合同管理",
          advanText: "无纸化办公，简化记录保存，并节省时间!",
          img: "img/product/advan2.png"
        },
        {
          advanTitle: "个性定制专属签名",
          advanText: "提供加密，确保文件不被篡改，方便查找签名，随时随地可使用。",
          img: "img/product/advan3.png"
        },
        {
          advanTitle: "电子签名助力公司成长",
          advanText: "节省开支和增加收入。了解五孚签是如何帮助你得到客户和留住客户。",
          img: "img/product/advan4.png"
        },
        {
          advanTitle: "没有传真、扫描邮寄的等待",
          advanText: "电子邮件发送文档，即时签署并返回。云端合同编辑，省心又省时。",
          img: "img/product/advan5.png"
        },
        {
          advanTitle: "比传统纸质合同更安全",
          advanText: "加密文档并保存完整的审计线索，为客户提供专业的电子合同证据链。",
          img: "img/product/advan6.png"
        }
      ],
      productFlow: "img/product/productFlow.png"
    };
  }
};
</script>

<style lang="less">
.product {
  // 模块一：banner
  .banner {
    width: 100%;
    background: pink;
    height: 500px;
    background: url("~static/img/product/productBanner.png") center center;
  }
  // 模块二：产品优势
  .advantage {
    padding-top: 60px;
    .advanUl {
      margin-top: 60px;
      .advanLi {
        width: 292px;
        &:nth-child(2),
        &:nth-child(5) {
          margin: 0 157px;
        }
        .advanImgOuter {
          width: 292px;
          height: 182px;
          overflow: hidden;
          position: relative;
          .shade {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #434445;
            opacity: 0.5;
            transition: all 1s ease;
            transition-delay: 0s;
            transition-duration: 0.3s;
            transition-property: opacity;
            transition-timing-function: ease-in;
            z-index: 200;
          }
          .advanImg {
            border: 1px solid #eeeeee;
            transition: all 1s ease;
            cursor: pointer;
            transition-delay: 0s;
            transition-duration: 1s;
            transition-property: all;
            transition-timing-function: ease;
            z-index: 1;
          }
          &:hover {
            .advanImg {
              transform: scale(1.2, 1.2);
            }
          }
        }
        .advanTitle {
          font-size: 1.6rem;
          line-hegiht: 16px;
          font-weight: bold;
          margin: 30px 0 20px 0;
        }
        .advanText {
          font-size: 1.4rem;
          line-hegiht: 16px;
        }
      }
      .advanLiMargin {
        margin-right: 0;
      }
    }
  }
  //模块三：产品流程介绍
  .flow {
    margin: 125px auto 50px auto;
    .specific {
      width: 1090px;
      margin: 0 auto;
      margin-top: 60px;
      img {
        width: 100%;
      }
    }
  }
}
</style>
